<template>
	<gracePage statusBarBG="#EB5D4B" :headerHeight="0" :isSwitchPage="true">
		<view class="top-user-info" slot="gBody">
			<view class="ucenter-face">
				<image class="ucenter-face-image" :src="memberinfo.imgurl?memberinfo.imgurl:'../../static/logo.png'" mode="widthFix"></image>
				<text class="user-name">{{memberinfo.nickname}}</text>
			</view>
			<view class="right">
				<text @tap="goPayment" class="iconfont icon-erweima1" style="font-size: 48rpx;color: #FFFFFF;margin-right: 48rpx;"></text>
				<text class="grace-icons icon-set grace-white" style="font-size: 48rpx;" @tap="gotosetup"></text>
			</view>
		</view>
		<view slot="gBody" class="grace-body">
			<view class="account-info">
				<view class="items" @tap="gotosmymoney">
					<text class="number">{{memberinfo.recharge}}</text>
					<text class="info">余额</text>
				</view>
				<view class="line"></view>
				<view class="items">
					<text class="number">{{memberinfo.point}}</text>
					<text class="info">积分</text>
				</view>
				<view class="line"></view>
				<view class="items" @tap="gotosmycoupon">
					<text class="number">{{memberinfo.couponnums}}</text>
					<text class="info">优惠券</text>
				</view>
			</view>
			<view class="grace-list grace-margin-top" style="background-color: #FFFFFF;border-radius: 16rpx;">
				<view class="grace-list-items">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text" style="font-weight: 600;color: #333333;">我的订单</text>
							<text class="grace-list-arrow-right" style="width: auto;color: #999999;" @tap="gotomyorder(0)">
								<text>查看全部</text>		
								<text class="grace-icons icon-arrow-right"></text></text>
						</view>
					</view>
				</view>
				<view class="grace-list-items">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<view class="order-items">
								<view class="order-item">
									<text class="grace-icons icon-wallet" style="font-size: 48rpx;color: #999999;margin-bottom: 20rpx;"></text>
									<text style="color: #999999;font-size: 24rpx;" @tap="gotomyorder(1)">待付款</text>		
								</view>
								<view class="order-item">
									<text class="iconfont icon-daifahuo" style="font-size: 48rpx;color: #999999;margin-bottom: 20rpx;"></text>
									<text style="color: #999999;font-size: 24rpx;" @tap="gotomyorder(2)">待发货</text>		
								</view>
								<view class="order-item">
									<text class="iconfont icon-daishouhuo" style="font-size: 48rpx;color: #999999;margin-bottom: 20rpx;"></text>
									<text style="color: #999999;font-size: 24rpx;" @tap="gotomyorder(3)">待收货</text>		
								</view>
								<view class="order-item">
									<text class="iconfont icon-daipingjia" style="font-size: 48rpx;color: #999999;margin-bottom: 20rpx;"></text>
									<text style="color: #999999;font-size: 24rpx;" @tap="gotomyorder(4)">待评价</text>		
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="grace-list grace-margin-top" style="background-color: #FFFFFF;border-radius: 16rpx;">
				<view class="grace-list-items">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text" style="font-weight: 600;color: #333333;">好友动态</text>
						</view>
					</view>
				</view>
				<view class="grace-list-items" @tap="gotopointmall">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">积分商城</text>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
						</view>
					</view>
				</view>
				<view class="grace-list-items" @tap="gotocouponcenter">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">领券中心</text>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
						</view>
					</view>
				</view>
				<!-- <view class="grace-list-items">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">商务合作</text>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
						</view>
					</view>
				</view> -->
				<!-- <view class="grace-list-items">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">常用应用</text>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
						</view>
					</view>
				</view> -->
				<!-- <view class="grace-list-items">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">幸福家园</text>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
						</view>
					</view>
				</view> -->
				<view class="grace-list-items" @tap="goService">
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">客服与帮助</text>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceBoxBanner from '../../graceUI/components/graceBoxBanner.vue';
export default {
	data() {
		return {
			memberinfo:{}
		};
	},
	onShow() {
		if (!uni.getStorageSync('userInfo')) {
			uni.navigateTo({
				url: '../login/login'
			});
		}else {
			this.gRequest.get('/login/getmemberinfo', {
				member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id
			}, res => {
				this.setData({ memberinfo: res.data });
			});
		}
	},
	methods: {
		goService(){
			uni.navigateTo({
				url:"../customerService/index"
			})
		},
		goPayment(){
			uni.navigateTo({
				url: '../paymentCode/paymentCode'
			});
		},
		gotosmymoney:function(){
			uni.navigateTo({
				url: '../myMoney/myMoney'
			});
		},
		gotocouponcenter:function(){
			uni.navigateTo({
				url: '../couponCenter/couponCenter'
			});
		},
		gotosmycoupon:function () {
			uni.navigateTo({
				url: '../my/myCoupon'
			});
		},
		gotomyorder: function(index) {
			uni.navigateTo({
				url: '../myorders/myorders?swiperIndex='+index
			});
		},
		gotopointmall: function() {
			uni.navigateTo({
				url: '../pointsMall/pointsMall'
			});
		},
		gotosetup:function(){
			uni.navigateTo({
				url: '../my/setUp'
			});
		}
	},
	components: {
		gracePage,
		graceBoxBanner
	}
};
</script>
<style lang="scss" scoped>
page {
	background: #f4f4f4;
}
.ucenter-line {
	height: 12rpx;
	background-color: #f4f5f6;
	margin: 16rpx 0;
}
.grace-body {
	padding: 0 40rpx;
	width: 670rpx;
	position: relative;
	top: -80rpx;
}
.top-user-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 180rpx;
	background:linear-gradient(268deg,rgba(235,93,75,1),rgba(253,129,95,1));
	padding: 0 42rpx 80rpx;
	.ucenter-face {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #ffffff;
		.user-name {
			margin-left: 28rpx;
		}
		.ucenter-face-image {
			width: 100rpx !important;
			height: 100rpx !important;
			border-radius: 50%;
			border: 2rpx solid #ffffff;
		}
	}
}
.account-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 160rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	.line {
		width:2rpx;
		height:84rpx;
		background:rgba(220,220,220,1);
	}
	.items {
		flex: 1;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.number {
			font-size: 34rpx;
			margin-bottom: 10rpx;
			color: #333333;
		}
		.info {
			font-size: 24rpx;
			color: #666666;
		}
	}
}
.grace-list-body {
	padding: 26rpx;
	margin: 0 26rpx;
}
.grace-list-arrow-right {
	font-size: 28rpx!important;
}
.order-items {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	.order-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 95rpx;
	}
}
</style>
